<template>
	<view class="withdraw-record">
		<!-- 标题栏 -->
		<view class="header">
			<text class="title">提现记录</text>
			<view class="underline"></view>
			<button class="apply-btn" @click="toApply">我要申请+</button>
		</view>

		<!-- 提现记录列表 -->
		<view class="record-list">
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower" :show-scrollbar="false">
				<view class="record-item" v-for="(item, index) in records" :key="index">
					<view class="info-row">
						<text class="label">提现金额(元)：</text>
						<text class="value">{{ item.extractPrice }}</text>
					</view>
					<view class="info-row">
						<text class="label">申请时间：</text>
						<text class="value">{{ item.createTime }}</text>
					</view>
					<view class="info-row">
						<text class="label">收款微信：</text>
						<text class="value">{{ item.realName }}</text>
					</view>
					<view class="status-tag" :class="{'processing':item.status==0,'success':item.status==1,'fail':item.status==-1}">
						{{ item.status == '0' ? '处理中' : item.status == '1' ?'提现成功':'失败' }}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getWithdrawalListApi
	} from '@/api/user'
	export default {
		data() {
			return {
				pageParams: {
					page: 0,
					limit: 15
				},
				records: [
					
				]
			}
		},
		onShow() {
			this.init()
			this.getList()
		},
		methods: {

			toApply() {
				this.$yrouter.push('/pages/user/UserAccount/apply')
			},
			lower() {
				console.log('到底')
				this.pageParams.page++
				this.getList()
			},
			init() {
				this.pageParams = {
					page: 0,
					limit: 15
				}
			},
			getList() {
				getWithdrawalListApi({
					page: this.pageParams.page,
					size: this.pageParams.limit,
					sort: 'desc'
				}).then((res) => {
					if (res.status == 200) {
						if (this.pageParams.page == 0) {
							this.records = []
						}
						this.records = this.records.concat(res.data.content)
					}
				})
			},
		},
		onPullDownRefresh() {
			this.getList()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="less">
	.withdraw-record {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;

		.header {
			position: relative;
			margin-bottom: 30rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}

			.underline {
				width: 80rpx;
				height: 6rpx;
				background-color: #FF9500;
				margin-top: 10rpx;
			}

			.apply-btn {
				position: absolute;
				right: 0;
				top: 0;
				background-color: #2169D3;
				color: #fff;
				font-size: 28rpx;
				border-radius: 8rpx;
				padding: 0 20rpx;
				height: 60rpx;
				line-height: 60rpx;


			}
		}

		.record-list {
			background-color: #fff;
			border-radius: 16rpx;

			::-webkit-scrollbar {
				display: none;
				width: 0;
				height: 0;
			}

			.scroll-Y {
				height: 90vh;
			}

			.record-item {
				padding: 30rpx 30rpx;
				border-bottom: 1rpx solid #eee;
				position: relative;

				.info-row {
					margin-bottom: 16rpx;
					font-size: 28rpx;

					.label {
						color: #999;
					}

					.value {
						color: #333;
					}
				}

				.status-tag {
					position: absolute;
					right: 12rpx;
					top: 30rpx;
					padding: 6rpx 12rpx;
					border-radius: 6rpx;
					font-size: 24rpx;

					
				}
				.processing {
					background-color: #f0f0f0;
					color: #666;
				}
				
				.success {
					background-color: #4CD964;
					color: #fff;
				}
				.fail{
					background-color: #e1212b;
					color: #fff;
				}
			}
		}
	}
</style>